[レポート] MOB202: AWSでモバイル・Webアプリを開発する #reinvent

AWS re:Invent 2018

#AWS AppSync

#Amazon Pinpoint

#Amplify Console

#イベントレポート

#Amazon Cognito

諏訪悠紀

2018.12.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

MOB202-L - Leadership Session: Developing Mobile & Web Apps on AWS

re:Invent 2018にてセッション「Developing Mobile & Web Apps on AWS」を聴講したのでレポートします。

Do you wonder what AWS thinks about mobile development? In this session, learn the very latest about the many AWS services that web and mobile developers can leverage to make cloud-enabled development possible, and hear what might be in store for the future.

Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018 from Amazon Web Services

業界のトレンド

2,580億のダウンロード数
企業はネイティブアプリ・Webアプリでの80%以上の投資を期待
71.5%のJavaScriptの知名度の増加
4倍のGraphQLの知名度の増加

デベロッパーからの質問

マルチプラットフォーム
設定、プロビジョニング、チームワークフローの集中化
セキュア・スケーラブルなアプリ
フロントエンド・バックエンドのビルド・テスト・デプロイ・ホストのツール

デベロッパーからの質問に対してのデリバリ

この12ヶ月でローンチした新サービス・プロダクト
- AWS Amplifyのローンチ : OSSのJavaScriptライブラリ
- AWS AppSyncのローンチ : オフライン・リアルタイムデータ
- AWS AmplifyのIonic, Angular, Vueのサポート
- AWS AmplifyのCLIツールとUIコンポーネントの追加
- AWS AppSyncのGraphQL APIビルダー、HTTPデータソース、GraphQL Scalar Typeの追加
- iOS & Android SDK

デベロッパーの経験に連携させる

Amplify Framework : OSSのクライアント向けフレームワーク
Cloud Service : Amazon Cognito, AWS AppSync, Amazon Pinpoint
Developer Tools : フロントエンド・バックエンドのビルド・テスト・デプロイ・ホストのツール

Amplify Framework

フロントエンドデベロッパー向け
- iOS / Android をサポート
- React / React Native / Angular / Ionic / Vue
カテゴリベースの機能の利用
- Auth, Analytics, API, ...
React / React Native / Angular / Ionic向けUIコンポーネント
- 認証、写真ピッカー、チャットボットなどをサポート
即座にバックエンドサービスを立ち上げられるCLIツール

`$ amplify add api`

GraphQLのAPIを簡単に作成し、クライアントのコードを生成できます。

Step1 : GraphQL Schemaの編集とプッシュ
Step2 : アプリコードのコーディング

New! Multi-Environments Team Workflow

AWS Amplifyで複数の環境をチームで管理できるようになりました。

Managing Multiple Environments and Team Workflows - AWS Amplify

Cloud Services

Core
- Auth
  - Amazon Cognito
- API: Data
  - AWS AppSync
  - AWS Lambda
  - Amazon DynamoDB
  - Amazon Elasticsearch Service
  - Amazon Aurora
  - HTTP Data Source
- Analytics
  - Amazon Pinpoint
  - Amazon Kinesis
Experiences
- API
  - Amazon API Gateway
- Storage
  - Amazon S3
- Interactions
  - Amazon Lex
- AR&VR
  - Amazon Sumerian
- PubSub
  - AWS IoT Core

AWS AppSync

リアルタイムコラボレーション
オフライン＆同期プログラミングモデル
複数データソース
きめ細かいアクセスコントロール

AppSyncおよびGraphQLのメリット

データのアグリゲーション
クライアント定義型のデータ選択
通信帯域幅の最適化
高速なプロトタイピング
容易なAPIの進化

New : 新しいAppSyncの機能

Pipeline Resolver
Delta Sync
Aurora Serverless Data Source (Beta)

AppSyncの事例

aibo (Sony)
cookpadTV (Cookpad)

Developer Tools

AWS Device Farmでアプリの品質を高める

テストの自動化
実機へのリモートアクセス
実機でのリモートデバッグ

New : AWS Amplify Console

グローバル対応
簡単なカスタムドメインセットアップ
シンプルなCI/CDワークフロー
Featureブランチ開発
アトミックデプロイ
パスワード保護

Ticketmaster事例

イベントのチケットを購入できるサービスであるTicketmasterでの活用事例です。s

なぜ使ったか？

5秒以下で動作
10万の年間イベント数 + 10億人のファン = 大規模データ
リアルタイムでシート情報を更新 (年間5億シート)
ビジョンはE2Eで総合的な単一のスキーマ
生産性までの時間
複雑さに取り組むコストを素晴らしい物を作成するコストに

どのように始めたか？

REST APIだとフェッチ前後、クライアントサイドで複雑だった
BFF(Backend for Frontend)でデータを変換
BFFでデータを集約
その後、BFFとREST APIをAppSyncに載せ替え
- 1箇所でデータを集約・変換
- 単一のリクエストで必要なデータを取得

GraphQLのビジョンをどのように達成するのか

テクノロジー採用のカーブ
- GraphQLが小さいキャズムと大きいキャズムを乗り越えるために何が必要？
- イノベーターがGraphQLでAPIを作り始める
- アーリーアダプタは戦略的な飛躍を求める
  - アーリーアダプタが疑問に対する問いを求める
- アーリーマジョリティは生産性の向上を求める実用主義者
コラボレーションモデル
- 複数のチームでどのようにSchemaをコラボレーションすれば良いか？
- AppSync + サーバーレスモデルを採用する
イベントドリブンなサーバーレスアーキテクチャ
- Subscriptionの活用

ウォークスルー

ChatQL

ChatQLはリアルタイムでやり取りが行われるチャットアプリに最適
- aws-samples/aws-mobile-appsync-chat-starter-angular

何が必要？何を使う？

開発
- ユーザー管理＆認証
- Amazon Cognito User Pools
- リアルタイムAPI
- AWS AppSync
- SDKとツール
- Amplify Framework
デプロイ
- 複数環境
- Amplify CLI
- ホスティング
- AWS Amplify Console
- CI / CD
- AWS Amplify Console
- アナリティクス
- Amazon Pinpoint